<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Welcome to my coutry——China！</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      #messageDiv {
        padding-left: 10px;
        padding-right: 10px;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.25/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
		"esri/layers/VectorTileLayer",
        "esri/layers/TileLayer",
        "esri/Graphic",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/layers/GroupLayer",
		"esri/layers/GeoJSONLayer",
	    "esri/smartMapping/renderers/color",
	    "esri/widgets/Legend",
        "esri/widgets/LayerList",
      ], (
        Map,
        MapView,
		VectorTileLayer,
        TileLayer,
        Graphic,
        FeatureLayer,
        GraphicsLayer,
        GroupLayer,
		GeoJSONLayer,
		colorRendererCreator,
		Legend,
		LayerList
      ) => {
		esriConfig.apiKey = "AAPK449340f85b664e6b802d2d0e65eb4849vlSII8YqKpEj5Fn0hCy2qr4QyOAZRZSB6XWDc2-X8pFlNoRYoQoetUvFs1Y_JVKL";
        
        const countries = new GeoJSONLayer({
		url: "https://cxqttkl.github.io/web4gis15/china.geojson"
        });

        // clicked country feature will be added to this layer
        const graphicsLayer = new GraphicsLayer({
          blendMode: "destination-in",
          title: "layer"
        });

        const tileLayer = new TileLayer({
          portalItem: {
            // bottom layer in the group layer
            id: "10df2279f9684e4a9f6a7f08febac2a9" // world imagery
          }
        });
        tileLayer.when(() => {
          tileLayer.sublayers.forEach((layer) => {
            if (layer.popupEnabled === true) {
              layer.popupEnabled = false;
            }
          });
        });

        // this grouplayer has two layers
        // destination-in blendMode set on the graphics layer
        // country from the world imagery layer will show when user clicks on a country
        const groupLayer = new GroupLayer({
          layers: [
           tileLayer,
            // world imagery layer will show where it overlaps with the graphicslayer
            graphicsLayer
          ],
          opacity: 0 // initially this layer will be transparent
        });
		
		const geojsonlayer = new GeoJSONLayer({
		    url: "https://cxqttkl.github.io/web4gis15/china.geojson",
			
		});

        const map = new Map({
//一个简单的利用Layer blending的底图：山体阴影 + 有颜色的底图
            basemap: {
                baseLayers:[
                new TileLayer({
                    portalItem: {
                    id: "1b243539f4514b6ba35e7d995890db1d" // world hillshade
                    }
                }),
                new VectorTileLayer({
                    portalItem: {
                    id: "273bf8d5c8ac400183fc24e109d20bcf" // community style vector tiles
                    },
                    blendMode: "multiply"
                })
                ]
            },
            layers: [geojsonlayer,groupLayer]
        });

		
		
        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [114.805, 32.027], // Longitude, latitude
          zoom: 1,	
          popup: null,
          constraints: {
            snapToZoom: false,
            minScale: 147914381
          }
        });

        view.ui.add("messageDiv", "top-right");
		
//颜色渲染——ContinuousRenderer by SmartMapping		
		let colorParams = {
		  layer: geojsonlayer,
		  view: view,
		  field: "pop2010",
		  theme: "high-to-low"
		};
		
		// when the promise resolves, apply the renderer to the layer
		colorRendererCreator.createContinuousRenderer(colorParams)
		  .then(function(response){
		    geojsonlayer.renderer = response.renderer;
		  });
//图例		
		let legend = new Legend({
		  view: view
		});
		
		view.ui.add(legend, "bottom-right");
		
		
//Highlight a convince with an effect
        view.when(() => {
          const query = {
            geometry: view.center,
            returnGeometry: true,
            outFields: ["*"]
          }
          highlightCountry(query, view.center)
        });

        // listen to the view's click event
        view.on("click", async (event) => {
          const query = {
            geometry: view.toMap(event),
            returnGeometry: true,
            outFields: ["*"]
          }
          highlightCountry(query, query.geometry);
        });

        async function highlightCountry(query, zoomGeometry){
          // country symbol - when user clicks on a country
          // we will query the country from the countries featurelayer
          // add the country feature to the graphics layer.
          const symbol = {
            type: "simple-fill",
            color: "rgba(255, 255, 255, 1)",
            outline: null
          };

          // query the countries layer for a country that intersects the clicked point
          const {
              features: [feature]
            } = await countries.queryFeatures(query);
            // user clicked on a country and the feature is returned
            if (feature) {
              graphicsLayer.graphics.removeAll();
              feature.symbol = symbol;
              // add the country to the graphics layer
              graphicsLayer.graphics.add(feature);
              // zoom to the highlighted country
              view.goTo(
                {
                  target: zoomGeometry,
                  extent: feature.geometry.extent.clone().expand(1.8)
                },
                { duration: 1000 }
              );
              // blur the world imagery basemap so that the clicked country can be highlighted
              //basemap.effect = "blur(8px) brightness(1.2) grayscale(0.8)";
              // set the group layer transparency to 1.
              // also increase the layer brightness and add drop-shadow to make the clicked country stand out.
              geojsonlayer.effect = "blur(8px) brightness(1.2) grayscale(0.8)";
              groupLayer.effect = "brightness(1.5) drop-shadow(0, 0px, 12px)";
              groupLayer.opacity = 1;
            }
            // did not click on a country. remove effects
            else {
              groupLayer.effect = null;
			  geojsonlayer.effect = null;

            }
        }

//Event事件——弹窗显示属性信息
          view.on("click",function(evt){
          	 
             var query = geojsonlayer.createQuery();
         	 
             query.returnGeometry = true;
          	 query.outFields = ["PROV", "pop2000","pop2010","Area_sqkm","popPerSqKm"];
             query.outSpatialReference = { "wkid": 4326 }; 
             query.geometry = evt.mapPoint; //view.toMap(evt);  // the point location of the pointer
  		     query.distance = 0;
  		     query.units = "kilometers";
             query.spatialRelationship = "intersects";  // this is the default
          
          	 geojsonlayer.queryFeatures(query).then(function(results){
             	
                
                if(results.features.length>0){
                    results.features.forEach(function(item){
                        alert("该区域为：" + item.attributes["PROV"]  +
                        " ；2000年人口为：" + item.attributes["pop2000"]+
                        "；2010年人口为： "+item.attributes["pop2010"]+
                        " ；面积为：" + item.attributes["Area_sqkm"]+"km²"+
                        " ；人口密度为：" + item.attributes["popPerSqKm"]+"km/人");
                    });
                }
                else{
                    alert("未返回查询结果！");
                }
             });
          });		

//图层组的List	
          let layerList = new LayerList({
          view: view
          });
          // Adds widget below other elements in the top left corner of the view
          view.ui.add(layerList, {
          position: "top-left"
          });
		

		
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
    <div id="messageDiv" class="esri-widget esri-heading">
      <h4 class="esri-heading">Click on a country</h4>
    </div>
  </body>
</html>